<template>
  <div class="record">
    <div class="head flex between item-center">
      
    </div>
    <div class="content">
      <ul style="margin-bottom: 10px;">
        <li class="flex shadow-bottom between" v-for="item of records" :key="item.id">
          <div class="flex item-center" style="flex: 2;">
              <div class="img-center" :style="{backgroundImage: `url(${item.show_tpdz})`}"></div>
              <div class="titlebox">
                  <h2 class="black large">{{ item.course_name }}</h2>
                  <p>{{ item.introduction }}</p>
              </div>
          </div>
          <div class="titlebox" style="flex: 1;">
              <p>课程时长</p>
              <p>{{ item.duration }}</p>
          </div>
          <div class="titlebox" style="flex: 1;">
              <p>知识点</p>
              <p>{{ item.knowledge }}</p>
          </div>
          <div class="titlebox" style="flex: 1;">
              <p>是否完成</p>
              <p>
                <el-tag type="success" v-if="item.is_complete == '0'">已完成</el-tag>
                <el-tag type="primary" v-else>未完成</el-tag>
              </p>
          </div>
          <div class="titlebox" style="width: 150px;">
              <el-button  plain @click="handleStudy(item)">重新学习</el-button>
          </div>
        </li>
      </ul>
      <el-pagination background layout="prev, pager, next" :total="total"
        @current-change="changePage"
        :page-count="total % params.pageSize == 0 ? total / params.pageSize : total / params.pageSize + 1"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Api from '@/api'
export default {
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      studyStatus: [
        { id: 1, title: '所有', current: true },
        { id: 2, title: '进行中', current: false },
        { id: 3, title: '已完成', current: false }
      ],
      records: [
        
      ]
    }
  },
  mounted() {
    this.getRecords()
  },
  methods: {
    getRecords() {
      Api.findStudyRecordListPage(this.params).then(res => {
        this.records = res.data.rows
        this.total = res.data.total
      })
    },
    handleStudy(course) {
      this.$router.push(`/course/${course.course_id}`)
    },
    changeStatus(status) {
      this.studyStatus.forEach(item => item.current = item.id === status.id)
    },
    changePage(val) {
      this.params.pageNum = val
      this.getRecords()
    },
  }
}
</script>

<style lang="scss" scoped>
.current {
  color: var(--color-primary);
  border-color: var(--color-primary) !important;
}
.record {
  padding: 10px;
  .head {
    .status {
      li {
        width: 64px;
        text-align: center;
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid #ccc;
      }
    }
  }
  .content {
    >ul {
      >li {
        margin-top: 20px;
        transition: all .3s;
        height: 180px;
        padding: 15px 20px;
        &:hover {
          box-shadow: 0 5px 20px #ddd;
        }
        &>div:first-of-type {
          height: 100%;
          .img-center {
              margin-right: 10px;
              width: 250px;
              height: 100%;
          }
        }
        .titlebox {
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-around;
        } 
      }
      
    }
  }
}
</style>